<template>
  <div class="user-page">
    <!-- 图片 -->
    <!-- 1游客 -->
    <router-view></router-view>
    <div class="top-img" v-if="flag">
      <van-image
        width="100%"
        height="100%"
        fit="cover"
        :src="require('@/assets/zufang/zufangApp001.jpeg')"
      />
    </div>
    <!-- 2用户 -->
    <div class="top-img" v-else>
      <van-image
        width="100%"
        height="100%"
        fit="cover"
        :src="require('@/assets/zufang/zufangApp009.jpeg')"
      />
    </div>
    <!-- 登录卡片 -->
    <!-- 1游客 -->
    <div class="user-card" v-if="flag">
      <div class="circle">
        <van-image
          round
          width="100%"
          height="100%"
          fit="cover"
          :src="require('@/assets/touxiang/touxiang11.jpg')"
        />
      </div>
      <p class="user">游客</p>
      <div class="user-button">
        <van-button type="primary" size="small" to="/login" style="width: 75px"
          >去登录</van-button
        >
      </div>
    </div>
    <!-- 2用户 -->
    <div class="user-card-login" v-else>
      <div class="circle">
        <!-- <van-image
          round
          width="100%"
          height="100%"
          fit="cover"
          :src="require('@/assets/touxiang/touxiang10.jpg')"
        />	 -->
        <van-image
          round
          width="100%"
          height="100%"
          fit="cover"
          :src="`http://liufusong.top:8080${avatar}`"
        />
      </div>
      <p class="user">{{ nickname }}</p>
      <div class="user-button">
        <van-button
          type="primary"
          size="small"
          style="width: 75px"
          round
          @click="logOut"
          >退出</van-button
        >
      </div>
      <div class="user-AboutMe">
        编辑个人资料<span class="iconfont icon-tiaozhuan"></span>
      </div>
    </div>
    <!-- 中间组件 -->
    <div class="user-comp">
      <van-grid :column-num="3" :border="false" clickable>
        <van-grid-item icon="star-o" text="我的收藏" to="/Myfavorites" />
        <van-grid-item icon="wap-home-o" text="我的出租" />
        <van-grid-item icon="clock-o" text="看房记录" />
        <van-grid-item icon="debit-pay" text="成为房主" />
        <van-grid-item icon="contact" text="个人资料" />
        <van-grid-item icon="service-o" text="联系我们" />
      </van-grid>
    </div>
    <!-- 底部joinUs -->
    <div class="joinus">
      <van-image
        width="100%"
        height="100%"
        fit="cover"
        :src="require('@/assets/joinus/joinus006.jpg')"
      />
    </div>
  </div>
</template>

<script>
import "@/assets/iconfont/iconfont.css"; //引入CSS
import { user } from "@/API/user";
// import { user } from "@/API/user";
import { removeToken, getToken } from "@/utils/storage";
// import { Toast } from "vant";
import { Toast } from "vant";
export default {
  name: "user-page",
  data() {
    return {
      status: "", //200
      avatar: "", ///img/avatar.png
      nickname: "", //好客_175231
      flag: false, //false
    };
  },
  methods: {
    logOut() {
      removeToken();
      this.flag = true;
    },
  },
  async created() {
    const res = await user(getToken());
    console.log(res);
    res.status === 200
      ? ((this.flag = false),
        (this.nickname = res.body.nickname),
        (this.avatar = res.body.avatar),
        (this.status = res.status))
      : (this.flag = true);
    if (res.status !== 200) {
      Toast("点击登录");
    }
  },

  computed: {},
};
</script>

<style lang="less" scoped>
.user-page {
  position: relative;
  .top-img {
    height: 220px;
    width: 100%;
    background-color: rgb(133, 0, 0);
  }
  .user-card {
    z-index: 99;
    background-color: white;
    width: 320px;
    height: 165px;
    box-shadow: 1px 1px 15px #b4b5b6;
    position: absolute;
    left: 50%;
    top: 150px;
    transform: translatex(-50%);
    .circle {
      border-radius: 50%;
      background-color: pink;
      width: 80px;
      height: 80px;
      margin: -40px auto;
      outline: 5px solid #fb7299;
      box-shadow: 1px 1px 15px #b4b5b6;
    }
    .user {
      display: flex;
      justify-content: center;
      margin-top: 60px;
    }
    .user-button {
      text-align: center;
      margin-top: 20px;
    }
  }
  .user-card-login {
    z-index: 99;
    background-color: white;
    width: 320px;
    height: 170px;
    box-shadow: 1px 1px 15px #b4b5b6;
    position: absolute;
    left: 50%;
    top: 150px;
    transform: translatex(-50%);
    .circle {
      border-radius: 50%;
      background-color: pink;
      width: 80px;
      height: 80px;
      margin: -40px auto;
      outline: 5px solid #fb7299;
      box-shadow: 1px 1px 15px #b4b5b6;
    }
    .user {
      display: flex;
      justify-content: center;
      padding-top: 40px;
    }
    .user-AboutMe {
      font-size: 13px;
      color: #9999b3;
      text-align: center;
      margin-top: 15px;
      .icon-tiaozhuan {
        font-size: 12px;
        margin-left: 5px;
      }
    }
    .user-button {
      text-align: center;
      margin-top: -5px;
    }
  }
  // 中间组件
  .user-comp {
    width: 350px;
    height: 180px;
    margin: 0 auto;
    margin-top: 110px;
  }
  // 底部joinUs
  .joinus {
    width: 320px;
    height: 85px;
    margin: 0 auto;
    margin-top: 5px;
  }
}
</style>
